import React from "react";
// 导入组件
import { Flex, WingBlank } from "antd-mobile";
// 导入 asiox
// import axios from 'axios'
import { API } from "../../utils/api";
import { BASE_URL } from "../../utils/url";

export default class News extends React.Component {
  state = {
    // 最新咨询的数据
    news: [],
  };
  // 获取最新咨询数据的方法
  async getNews() {
    const res = await API.get("/home/news", {
      params: {
        area: "AREA%7C88cff55c-aaa4-e2e0",
      },
    });
    if (res.status === 200) {
      // 更新数据
      this.setState({
        news: res.data.body,
      });
    }
  }
  //   钩子函数
  async componentDidMount() {
    // 调用最新咨询的方法
    this.getNews();
  }
  // 渲染最新咨询的结构
  renderNews() {
    return this.state.news.map((item) => (
      <div className="news-item" key={item.id}>
        <div className="imgwrap">
          <img src={`${BASE_URL}${item.imgSrc}`} alt="" />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="start">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ));
  }
  render() {
    return (
      <div className="index">
        {/* 最新咨询区域 */}
        <div className="news">
          <h3 className="news-title">最新咨询</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
        <div className="news">
          <h3 className="news-title">最新咨询</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    );
  }
}
